import { useEffect } from 'react'
import moment from 'moment'
import type {
  subjectslist,
  paperlist,
  ClassType
} from '@/services/type'
// 导入antd表单组件
import {
  DatePicker, // 日期选择器
  Form,       // 表单容器
  Input,      // 输入框
  Select,     // 选择器
  Button,     // 按钮
} from 'antd'

// 解构Select组件中的Option
const { Option } = Select
// 解构DatePicker组件中的RangePicker
const { RangePicker } = DatePicker

// 定义组件props接口
interface Props {
  changeStep: (values: number, data?: any) => void // 切换步骤函数
  formRef?: React.RefObject<any> // 表单ref引用
  classifyList: subjectslist[] // 科目分类列表
  proctorList: paperlist[] // 监考人列表
  studentList: ClassType[] // 学生列表
}

// 表单步骤组件
const FormStep = ( { changeStep, formRef, classifyList, proctorList, studentList }:Props ) => {
  // 使用antd Form hook获取表单实例
  const [form] = Form.useForm()
  
  // 如果存在formRef，将当前表单实例赋值给ref
  if (formRef) {
    formRef.current = form
  }

  // 表单提交处理函数
  const onFinish = () => {
    console.log('表单提交触发')
    // 获取表单所有字段值
    const formData = form.getFieldsValue()
    // 处理时间数据，转换为字符串格式
    if (formData['range-time-picker']) {
      formData['range-time-picker'] = formData['range-time-picker'].map(
        (date: any) => date.format('YYYY-MM-DD HH:mm:ss')
      )
    }
      // 确保proctor是ObjectId格式
      if (!formData.proctor || !/^[0-9a-fA-F]{24}$/.test(formData.proctor)) {
        throw new Error('监考人ID格式无效');
      }

      // 调用父组件方法切换步骤并传递表单数据
      changeStep(1, formData)
      
      // 深度复制formData避免引用问题
      const storageData = JSON.parse(JSON.stringify(formData));
      localStorage.setItem('examFormData', JSON.stringify(storageData))
    // console.log('localStorage存储的值:', localStorage.getItem('examFormData'))
  }

  // 填充表单数据函数
  const onFill = () => {
    const formData = localStorage.getItem('examFormData')
    if (formData) {
      try {
        const parsedData = JSON.parse(formData)
        // 恢复时间数据格式
        if (parsedData['range-time-picker'] && Array.isArray(parsedData['range-time-picker'])) {
          parsedData['range-time-picker'] = parsedData['range-time-picker'].map(
            (dateStr: string) => {
              if (typeof dateStr === 'string') {
                return moment(dateStr, 'YYYY-MM-DD HH:mm:ss')
              }
              return dateStr
            }
          )
        }
        form.setFieldsValue({ ...parsedData })
      } catch (error) {
        console.error('Failed to parse form data:', error)
      }
    }
  }

    // 初始加载时恢复数据
    useEffect(() => {
      onFill()
    }, [])


  // 渲染表单
  return (
    <Form
      form={form}          // 绑定表单实例
      layout="vertical"    // 垂直布局
      labelAlign="left"    // 标签左对齐
      style={{ maxWidth: 600, overflow: 'auto' }} // 表单样式
      onFinish={onFinish}  // 提交回调
    >
      {/* 考试名称字段 */}
      <Form.Item
        name="examName"   // 字段名改为驼峰式
        label="考试名称"  
        rules={[{ required: true, message: '请输入考试名称' }]}
      >
        <Input placeholder="请输入考试名称" />
      </Form.Item>

      {/* 考试时间字段 */}
      <Form.Item
        name="range-time-picker"
        label="考试时间"
        rules= {[{ type: 'array' as const, required: true, message: 'Please select time!' }]}
      >
        <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
      </Form.Item>

      {/* 科目分类字段 */}
      <Form.Item
        label="科目分类"        // 标签文本
        name="subject"         // 字段名
        rules={[{ required: true, message: '请选择科目分类' }]} // 校验规则
      >
        <Select placeholder="请选择">
          { classifyList.map(item => {
            return <Option value={item._id} key={item._id}>{item.name}</Option>
          })}
          
        </Select>
      </Form.Item>

      {/* 监考人字段 */}
      <Form.Item
        label="监考人"          // 标签文本
        name="proctor"         // 字段名
        rules={[{ required: true, message: '请选择监考人' }]} // 校验规则
      >
        <Select placeholder="请选择">
          { proctorList.map(item => <Option value={item._id} key={item._id}>{item.username}</Option>)}
        </Select>
      </Form.Item>

      {/* 考试班级字段 */}
      <Form.Item
        label="考试班级"        // 标签文本
        name="class"          // 字段名
        rules={[{ required: true, message: '请选择考试班级' }]} // 校验规则
      >
        <Select placeholder="请选择">
          { studentList.map(item => <Option value={item._id} key={item._id}>{item.name}</Option>)}
        </Select>
      </Form.Item>

      {/* 提交按钮 */}
      <Form.Item>
        <Button
          type="primary"
          htmlType="submit"
        >
          下一步
        </Button>
      </Form.Item>
    </Form>
  )
}

export default FormStep